<template>
	<view class="roc-select">
		<view @click="handleSelectShow()">
			<u-input v-model="columnsObj[inputValue]" disabled disabledColor="#ffffff"
				:placeholder="item.props.placeholder || '请选择'" :clearable="item.props.clearable || false" border="none">
			</u-input>
		</view>
		<uni-icons class="uni-icons" @click="handleClearable"
			v-if="(!item.props.clearable) && (!item.props.disabled) && value" type="clear" color="#e1e1e1" size="14">
		</uni-icons>
		<u-picker :show="selectShow" itemHeight="88" :columns="columns" keyName="label" closeOnClickOverlay
			@cancel="selectCancel" @close="selectCancel" @confirm="selectConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		apiapi
	} from '@/api/request.js';
	export default {
		name: 'roc-select',
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			formData: {
				type: Object,
				default () {
					return {};
				}
			},
			value: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				selectShow: false,
				columns: [],
				columnsObj: {},
				inputValue: this.value,
				watchNum: 0
			};
		},
		watch: {
			value(val) {
				this.inputValue = val
			}
		},
		async created() {
			if (this.item.options == undefined) {
				console.log(this.item.title, "=====================>", this.item, this.item.props.relationField, this
					.item.effect
					.fetch.action)
				// 接口数据
				if (
					this.item.effect.fetch != '' &&
					this.item.effect.fetch.action != undefined &&
					this.item.effect.fetch.action != ''
				) {
					if (!this.item.props.relationField) {

						const {
							data: {
								data
							}
						} = await apiapi(this.item.effect.fetch.action, 'POST', {});
						this.columns.push(data);
						this.resetColumsObj()
					} else {
						const [
							linkFieldNotSubtable,
							linkFieldNotSubtableCascader,
							linkFieldHaveSubtable,
							linkFieldHaveSubtableCascader,
						] = this.item.props.relationField.split(";")
						const [curTabField, searchField] = linkFieldNotSubtable.split(',')
						console.error(linkFieldNotSubtable, linkFieldNotSubtableCascader, linkFieldHaveSubtable,
							linkFieldHaveSubtableCascader)
						if (
							linkFieldNotSubtable &&
							!linkFieldNotSubtableCascader &&
							!linkFieldHaveSubtable &&
							!linkFieldHaveSubtableCascader
						) {
							/*
							  无子表 无级联情况
							*/
							this.$watch(`formData.${curTabField}`, (val) => {
								console.error("改变", this.item)
								if (this.watchNum) {
									//清空显示的lable
									this.inputValue = ""
									//清除表单该项数据
									this.formData[this.item.field] = ""
								}
								this.watchNum++
								this.columns = [];
								let searchParam = {
									[searchField]: val
								}
								apiapi(this.item.effect.fetch.action + "&search=" + JSON.stringify(
									searchParam), 'POST', {}).then(data => {
									this.columns.push(data.data.data);
									this.resetColumsObj()
								});
								// 
							})
						} else if (linkFieldNotSubtable &&
							!linkFieldNotSubtableCascader &&
							linkFieldHaveSubtable &&
							!linkFieldHaveSubtableCascader) {
							/*
							  有子表 无级联情况
							*/
							this.$watch(`formData.${curTabField}`, (val) => {
								if (this.watchNum) {
									//清空显示的lable
									this.inputValue = ""
									//清除表单该项数据
									this.formData[this.item.field] = ""
								}
								this.watchNum++
								this.columns = [];
								if (val) {
									let param = {
										code: subTableName,
										search: JSON.stringify({
											"fid": val
										}),
										page: 1,
										page_size: 999999
									}
									getList(param).then(res => {
										let list = res.data.data.list
										// 下一步筛选条件的值
										let subTableFieldValues = list.map((subDataItem) => {
											return subDataItem[subTableField]
										})
										let searchParam = {
											[searchField]: subTableFieldValues.join('|')
										}
										apiapi(this.item.effect.fetch.action + "&search=" +
											searchParam, 'POST', {}).then(data => {
											this.columns.push(data.data.data);
											this.resetColumsObj()
										});
									})
								}
							})
						}

					}
					console.log("下拉框选项 =========>", this.columns)
				} else {
					this.$u.toast(`${this.item.title}, 配置错误`);
				}


			} else {
				// 静态数据
				this.columns.push(this.item.options);
				this.resetColumsObj()
			}

		},
		methods: {
			resetColumsObj() {
				try {
					this.columns[0].forEach(col => {
						this.$set(this.columnsObj, col.value, col.label);

					});
				} catch (err) {
					// console.log(err);
				}
			},
			// 处理清空选中值
			handleClearable() {
				this.$emit('input', '')
			},
			// 打开选择器 & 禁用功能
			handleSelectShow() {
				if (this.item.props.disabled) return;
				this.selectShow = true;
			},
			// 关闭选择器
			selectCancel() {
				this.selectShow = false;
			},
			// 选择器确定选中的值
			selectConfirm(e) {
				console.log(e)
				this.$emit('input', e.value[0].value);
				this.selectShow = false;
			}
		}
	};
</script>

<style lang="scss">
	.roc-select {
		position: relative;
		width: 100%;

		.uni-icons {
			position: absolute;
			right: 0;
			top: 50%;
			z-index: 9;
			transform: translateY(-50%);
		}
	}
</style>
